<template>
        <view class="body-view">
            <scroll-view  class="top-menu-view" scroll-x="true" :scroll-left="scrollLeft">
                <block v-for="(menuTab,index) in subjectType" :key="index">
                    <view class="menu-one-view" v-bind:id="'tabNum'+index" @click="swichMenu(menuTab.id)">
                        <view :class="[currentTab==menuTab.id ? 'menu-one-act' : 'menu-one']">
                            <view class="menu-one-txt">{{menuTab.title}}</view>
                            <view class="menu-one-bottom">
                                <view class="menu-one-bottom-color"></view>
                            </view>
                        </view>
                    </view>
                </block>
            </scroll-view>
            <swiper :current-item-id="parseString(currentTab)" class="swiper-box-list" duration="300" @change="swiperChange">
                <block v-for="(swiperDate,index1) in subjectType" :key="index1">
                    <swiper-item :item-id="parseString(swiperDate.id)">
                        <scroll-view class="swiper-one-list" scroll-y="true" @scrolltolower="loadMore(swiperDate.id)">
<!--                            <block v-for="(swiperDate2,index2) in swiperDate" :key="index2">-->
<!--                                <view class="swiper-list-entity">-->
<!--                                    <view>{{swiperDate2}}</view>-->
<!--                                </view>-->
<!--                            </block>-->
                            <view class="my_works"  v-if="swiperDate.id == currentTab">
                                <view class="work_list">
                                    <view class="list" v-for="(item,key) in swiperDate.record" :key="key">
                                        <view class="list_img" @click="navigateTo('../record/index?id='+item.id)">
                                            <image style="border-radius: 20upx;" :src=" item.thumb_link.origin+'?x-oss-process=image/resize,m_fill,h_300,w_300' "   class="img"></image>
                                        </view>
                                        <view class="list_content">
                                            <view class="top">
                                                <view class="titles">
                                                    <view class="title font-semibold">{{substr(item.title,12)}}</view>
                                                </view>
                                                <view class="des">
                                                    <view class="font-light" style="font-size:24upx">
                                                        {{item.content.substring(0,12) || ''}}
                                                         <!--| {{item.words_count}}字&ndash;&gt;-->
                                                    </view>
                                                    <navigator :url="'../record/index?id='+item.id" open-type="navigate" class="say">
                                                        <text class="iconfont play">&#xe61c;</text>
                                                        <view class="font-medium">看读</view>
                                                    </navigator>
                                                </view>
                                            </view>
                                            <view class="bottom">
                                                <view class="icon">
                                                    <text class="iconfont ren">&#xe629;</text>&nbsp;&nbsp;&nbsp;&nbsp;
                                                    <view class="num font-light" style="padding-left: 8upx" >{{showNumber(item.tape_records_count)}}人读过</view>
                                                </view>
                                            </view>
                                        </view>
                                    </view>




                                </view>
                            </view>
                        </scroll-view>
                    </swiper-item>
                </block>
            </swiper>
        </view>
</template>

<script>
  import Request from '@/utils/request.js'
    export default {
        name: "index",
        data() {
            return {
                scrollLeft: 0,
                isClickChange: false,
                currentTab: '1',
                pageInfo:{},
                subjectType:[],
            }
        },
        onLoad: function(e) {
            this.currentTab = e.id.toString();
            //初始化数据
            // for (var i = 0; i < this.swiperDateList.length; i++) {
            //     this.getDateList(i);
            // }
            this.getType();
            // this.showAd();
        },
      methods: {

        showAd(){
          // 在页面中定义插屏广告
          let interstitialAd = null

// 在页面onLoad回调事件中创建插屏广告实例
          if (wx.createInterstitialAd) {
            interstitialAd = wx.createInterstitialAd({
              adUnitId: 'adunit-d6cf10a9a2bd51b9'
            })
            interstitialAd.onLoad(() => {
              console.log('插屏广告成功');
            })
            interstitialAd.onError((err) => {
              console.log('插屏广告失败');
            })
            interstitialAd.onClose(() => {})
          }

// 在适合的场景显示插屏广告
          if (interstitialAd) {
            interstitialAd.show().catch((err) => {
              console.error(err)
            })
          }
        },
        navigateTo(url){
          uni.navigateTo( {'url': url} )
        },
        substr(str,length){
          if(str.length>length) {
            return str.substring(0, length-1)+'..';
          }else{
            return str;
          }
        },
        showNumber(count){
            if(count>99){
              return '99+';
            }else{
              return count;
            }
        },
        getType() {
          uni.showLoading();
          Request.get('/tape/subject/group').then((res) => {
            this.subjectType = res.data;
            uni.hideLoading();
          })
        },

        parseString(value) {
          return value.toString();
        },
        swichMenu: async function (current) { //点击其中一个 menu
          if (this.currentTab == current) {
            return false;
          } else {
            this.currentTab = current;
            this.setScrollLeft(current);
          }
        },
        swiperChange: async function (e) {
          if (!this.subjectType.length < 0)
            return '';
          console.log(e);
          let index = e.detail.currentItemId;
          this.setScrollLeft(index);
          this.currentTab = index;
        },
        setScrollLeft: async function (tabIndex) {
          return ;
          let leftWidthSum = 0;
          for (var i = 0; i <= tabIndex; i++) {
            let nowElement = await this.getWidth('tabNum' + i);
            if(!nowElement)
                continue;
            leftWidthSum = leftWidthSum + nowElement.width;
          }
          let winWidth = uni.getSystemInfoSync().windowWidth;
          this.scrollLeft = leftWidthSum > winWidth ? (leftWidthSum - winWidth) : 0
        },
        getWidth: function (id) { //得到元素的宽高
          return new Promise((res, rej) => {
            uni.createSelectorQuery().select("#" + id).fields({
              size: true,
              scrollOffset: true
            }, (data) => {
              res(data);
            }).exec();
          })
        },
        loadMore: function (tabIndex) {
          console.log('正在加载更多数据。。。')
          this.getDataList(tabIndex);
        },

        /**
         * 分页信息
         * @param type_id
         */
        getDataList:function (type_id) {
          let page = this.pageInfo[type_id];
          if(!page)
            page=1;

          page++;
          this.pageInfo[type_id] = page;
          uni.showLoading();
          Request.get('/tape/subject?@sort=ranking.desc&status=1&type_id=$'+type_id+'&pageSize=10&page='+page).then((res)=>{
            for(let key in this.subjectType){
              if(this.subjectType[key].id === type_id){

                res.data.forEach((value)=>{
                  this.subjectType[key].record.push(value);
                })
              }

              uni.hideLoading();
              this.showAd();
            }
          })
        },
      }
    }
</script>

<style lang='scss'>
    page {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        justify-content: center;
        background: rgba(255, 255, 255, 1);
    }
    ::-webkit-scrollbar{
        width: 0upx;
    }
    .body-view {
        display: flex;
        flex: 1;
        flex-direction: column;
        overflow: hidden;
        height: 100%;
        width: 100%;
        align-items: flex-start;
        justify-content: center;
    }

    .top-menu-view {
        display: flex;
        white-space: nowrap;
        width: 100%;
        margin-top: 10upx;
        background-color: #FFFFFF;
        height: 75upx;
        /* 在这里设置导航条高度 */
    }

    .top-menu-view .menu-one-view {
        display: inline-block;
        white-space: nowrap;
        height: 100%;
    }

    .top-menu-view .menu-one-view .menu-one {
        /* 在这里写 单个按钮样式 */
        margin-left: 60upx;
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-txt {
        height: 24upx;
        font-size:$uni-font-size-base;
        font-weight: $font-medium;
        color: $uni-color-664e37;
        line-height: 24upx;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
    }

    .top-menu-view .menu-one-view .menu-one .menu-one-bottom .menu-one-bottom-color {
        width: 60%;
        height: 4upx;
    }

    .top-menu-view .menu-one-view .menu-one-act {
        /* 在这里写 单个按钮样式 */
        margin-left: 60upx;
        /*margin-right: 25upx;*/
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-txt {
        height: 24upx;
        font-size:$uni-font-size-base;
        font-weight: $font-regular;
        color: $uni-color-fcb300;
        line-height: 24upx;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom {
        position: absolute;
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
    }

    .top-menu-view .menu-one-view .menu-one-act .menu-one-bottom .menu-one-bottom-color {
        width: 32upx;
        height: 6upx;
        border-radius:4upx ;
        background: $uni-color-fcb300;
    }

    .swiper-box-list {
        flex: 1;
        width: 100%;
        height: auto;
        background-color: #FFFFFF;
    }

    .swiper-one-list {
        height: 100%;
        width: 100%;
    }

    .swiper-one-list .swiper-list-entity {
        width: 100%;
        height: 75upx;
        text-align: center;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .my_works{
        width: 630upx;
        height: auto;
        margin: 0 auto;
        .my_works_heade{
            display: flex;
            align-items: center;
            padding: 40upx 0;
            .img{
                width: 37upx;
                height: 37upx;
                margin-right:14upx;
            }
            .my_works_title{
                font-size: $uni-font-size-base;
                color: $uni-color-664e37;
            }
        }
        .work_list{
            .list{
                display: flex;
                padding-top: 30upx;
                .list_img{
                    width: $uni-img-size-160;
                    height:  $uni-img-size-160;
                    border-radius: 20upx;
                    overflow: hidden;
                    box-shadow: 0upx 0upx 10upx rgba(0, 0, 0, 0.15);
                    position: relative;
                    .img{
                        width: 100%;
                        height: 100%;
                    }
                }
                .list_content{
                    flex: 1;
                    margin-left: 30upx;
                    padding-top: 0upx;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    border-bottom: 2upx solid #f2f2f2;
                    .top{

                        .titles{
                            width: 100%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            font-weight: $font-regular;
                            .title{
                                width: 100%;
                                /*overflow: hidden;*/
                                /*text-overflow:ellipsis;*/
                                /*white-space: nowrap;*/
                                font-weight: 400;
                                font-size: 32upx;
                                color: $uni-color-664e37;
                            }
                        }
                        .des{
                            display: flex;
                            justify-content: space-between;
                            font-size: $uni-font-size-12;
                            color: $uni-color-876a48;
                            .say{
                                width: 145upx;
                                height: 60upx;
                                border-radius: 30upx;
                                background-color: $uni-color-fcb300;
                                color: #fff;
                                font-size: $uni-font-size-13;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-size: 400;
                                .play{
                                    font-size: 30upx;
                                    margin-right:10upx;
                                }
                                .img{
                                    width: 35upx;
                                    height: 33upx;
                                }
                            }
                        }
                    }
                    .bottom{
                        display: flex;
                        box-sizing: border-box;
                        padding-bottom: 35upx;
                        .icon{
                            display: flex;
                            align-items: center;
                            padding-right: 32upx;
                            .ren{
                                color: $uni-color-876a48;
                                font-size: 26upx;
                            }
                            .num{
                                font-size: 26upx;
                                padding-left: 4upx;
                                color: $uni-color-876a48;
                            }
                        }

                    }

                }
            }
        }
    }
</style>
